<template>
  <div>
    <div v-if="detailType">
      <el-table
        :header-cell-style="{ background: '#F3F8FE' }"
        align="center"
        :data="tableData"
        border
        class="tableHeight"
      >
        <el-table-column align="center" prop="ccto" label="裁决文书"> </el-table-column>

        <el-table-column align="center" prop="cdn" label="案件号"> </el-table-column>

        <el-table-column align="center" width="120" label="操作" v-if="!table">
          <template slot-scope="scope">
            <el-button class="see" @click="see(scope.row.cid)" type="text"
              >查看</el-button
            >

            <el-button class="see" @click="openUrl(scope.row.cid)" type="text"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="limit"
          layout="total, prev, pager, next, jumper"
          :total="Number(count)"
          align="left"
        ></el-pagination>
      </div>
    </div>

    <div v-else>
      <div v-if="data" class="content">
        <el-button @click="back" size="mini" type="danger">返回</el-button>
        <p v-html="data" style="margin-top: 10px"></p>
      </div>
      <div v-else>
        <el-button @click="back" size="mini" type="danger">返回</el-button>
        <el-empty description="暂无信息"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import Visitpatent from "./Visitpatent.vue";
import { cseExpression,detailCatalog,cseDownload } from "@/api/configApi";
import axios from "axios";
export default {
  data() {
    return {
      detailType: true,
      id: this.$route.query.id,
      activeName: "patent",
      tableData: [],
      index: 0,
      page: 1,
      limit: 10,
      count: 0,
      data: "",
      express: '',
    };
  },
  watch: {
    "form_admin.company": {
      handler(newV, oldV) {
    this.cseExpression();
      },
      deep: true,
    },
  },
  props: {
    form_admin: {
      type: Object,
      default: () => ({}),
    },
    table: {
      type: Boolean,
      default: false,
    },
    table: {
      type: Boolean,
      default: false,
    },
  },
  components: { Visitpatent },
  mounted() {
    this.express = `原告或上诉人=${this.form_admin.company} OR 被告或上诉人=${this.form_admin.company} OR 案号=${this.form_admin.company}`
    this.cseExpression();
  },
  methods: {
    cseExpression(){
      cseExpression({
        express: this.express,
        page: this.page,
        page_row: this.limit,
        sort_column: '-CJD'
      }).then(res => {
        this.tableData = res.list;
        this.count = res.total ? res.total : 0;
      })
    },

    back() {
      this.detailType = true;
      this.data = "";
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      this.page = currentPage;
      try {
        this.cseExpression();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async see(cid) {
      this.detailType = false;
      try {
        detailCatalog({
          id: cid
        }).then(res => {
          this.data = res.list[0].referee.cfto;
        })


      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async openUrl(id) {
      try {
        cseDownload({
          id : id
        }).then(res => {
          window.open(res.list[0].pdfPath);
        })

      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-drawer__header {
  margin-bottom: 20px;
  display: none;
}

.pagination {
  margin: 10px auto;
}

::v-deep .card_v .el-card__body {
  min-height: 1050px;
  padding: 0;
  .el-tabs .el-tabs__content {
    padding: 0 20px;
    tr th {
      font-size: 16px;
    }
    tr td {
      font-size: 16px;
    }
  }
}

.trademark {
  padding: 12px 0;
  .logo {
  }
  ._text {
    height: 105px;
    .el-row {
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .title_t {
        display: flex;
        justify-content: space-between;
      }
      .title_b {
        font-size: 12px;
      }
    }
  }
}

// ::v-deep .v_tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
//   padding: 0 20px !important;
// }
@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}
</style>
